<template>
	<!-- 聊天界面 需要携带用户信息进入 -->
	<div class="chat-container">
		<!-- 头部 返回 和 标题 好友信息 -->
		<van-nav-bar :title="firendInfo.account" left-text="返回" left-arrow @click-left="back" right-arrow
			@click-right="showMenu">
			<template #right>
				<!-- <van-icon name="ellipsis" size="18" /> -->
				<!-- 弹出框 -->
				<van-popover v-model:show="isShowMenu" :actions="actions" @select="onSelect" placement="bottom-end">
					<template #reference>
						<van-icon name="ellipsis" size="18" />
					</template>
				</van-popover>
			</template>

		</van-nav-bar>
		<!-- 消息列表 -->
		<div class="chat-msg">
			<van-list>
				<div v-for="(item, i) in msgList">
					<LeftMessage v-if="item.from==firendInfo.account" :msg="item" :user="firendInfo">
						<!-- 好友消息 在左侧 -->
					</LeftMessage>

					<RightMessage v-else :msg="item" :user="userInfo">
						<!-- 自己发送的消息 在右侧 -->
					</RightMessage>
					<!-- <van-cell :title="item.from" :value="item.content" /> -->
				</div>
			</van-list>
		</div>
		<!-- 输入框 -->
		<div class="chat-send-container">
			<van-cell-group>
				<van-field v-model="msgContent" center clearable placeholder="请输入文字信息">
					<template #button>
						<van-button size="small" type="primary" @click="sendMsg">发送</van-button>
					</template>
				</van-field>
			</van-cell-group>
		</div>
	</div>
</template>

<script>
	import {
		showToast,
		showConfirmDialog
	} from 'vant'
	import LeftMessage from './msg/LeftMessage.vue'
	import RightMessage from './msg/RightMessage.vue'

	export default {

		components: {
			LeftMessage,
			RightMessage
		},
		data() {
			return {
				"firendInfo": null,
				"userInfo": null,
				"hasHistory": true,
				"msgList": [],
				"msgContent": "",

				"isShowMenu": false,
				"actions": [{
					text: '删除好友',
					icon: 'delete-o'
				}]
			}
		},
		created() {
			console.log(this.$route.query)
		},
		beforeMount() {
			this.userInfo = this.$store.getters.userInfo
			this.firendInfo = JSON.parse(this.$route.query.firend)

			// 好友信息不为空 并且当前用户已登录
			if (!this.firendInfo || !this.$store.getters.isLogin) {
				this.$router.back()
			}
			// 获取用户 聊天记录 今日页面第一次请求, 要包含了历史消息
			this.receiveMsg()
		},
		mounted() {

		},
		methods: {
			back() {
				this.$router.back()
			},
			showMenu() {
				this.isShowMenu = true
			},
			receiveMsg() {
				let that = this
				// 接收消息
				this.$http.receiveMsg({
						"from": that.firendInfo.account,
						"to": that.$store.getters.userInfo.account,
						"hasHistory": that.hasHistory
					}).then(function(resp) {
						console.log(resp.data.data);
						if (resp.data.data.length > 0) {
							// 查询消息不为空 更新列表
							if (that.msgList.length == 0) {
								that.hasHistory = false
								that.msgList = that.msgList.concat(resp.data.data)
							} else {
								that.msgList = that.msgList.concat(resp.data.data)
							}
						}
					})
					.catch(function(e) {})
					.then(function() {
						if (that.$route.path == "/chat") {
							// 聊天界面循环请求 
							setTimeout(function() {
								that.receiveMsg()
							}, 1000)
						}
					})
			},
			sendMsg() {
				let that = this
				// 发送消息 (输入框内容为消息内容)
				this.$http.sendMsg({
						"from": that.$store.getters.userInfo.account,
						"to": that.firendInfo.account,
						"content": that.msgContent
					}).then(function(resp) {
						console.log(resp.data.data);
						// 发送成功, 清空输入框
						that.msgContent = ""
						// 消息 添加到内容
						that.msgList = that.msgList.concat(resp.data.data)
					})
					.catch(function(e) {})
					.then(function() {
						// 隐藏加载
					})
			},
			onSelect(action) {
				let that = this
				showConfirmDialog({
					title: '删除好友',
					message: '确定要删除好友吗, 该操作不可逆转哦',
				}).then(() => {
					that.deleteFirend()
				}).catch(() => {
					// on cancel
					showToast("取消了, 继续聊天吧")
				});
			},
			deleteFirend() {
				let that = this
				this.$http.deleteFirend({
						"from": that.userInfo.account,
						"to": that.firendInfo.account
					}).then(function(resp) {
						if (resp.data.code == 200) {
							// 删除好友成功
							showToast("已经删除好友, 即将退出聊天界面")
							that.$router.back()
						} else {
							showToast(resp.data.msg)
						}
					})
					.catch(function(e) {})
					.then(function() {})
			}
		}
	}
</script>

<style lang="scss">
	.chat-container {
		display: flex;
		flex-direction: column;
		height: 100%;

		& .chat-msg {
			flex: 1;
			height: 100%;
			background-color: #ececec;
		}

		& .chat-send-container {
			position: relative;
			bottom: 0;
			border: 1px solid #ececec;
		}
	}
</style>